<template>
  <!-- 添加或修改菜单对话框 -->
  <ElementDialog :title="!form.menuId ? '新增' : '修改'" :visible.sync="visible" append-to-body>
    <ElForm ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="菜单类型" prop="menuType">
            <ElRadioGroup v-model="form.menuType" size="small">
              <ElRadioButton label="0">左菜单</ElRadioButton>
              <ElRadioButton label="1">按钮</ElRadioButton>
              <ElRadioButton label="2">顶菜单</ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="上级菜单">
            <VueTreeSelect
              v-model="form.parentId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单" />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElFormItem v-if="form.menuType !== '1'" label="图标" prop="icon">
        <FyInputIcon v-model="form.icon" placeholder="请选择图标" :icon-list="iconList" />
      </ElFormItem>
      <ElFormItem label="名称" prop="name">
        <ElInput v-model="form.name" placeholder="请输入菜单名称" />
      </ElFormItem>
      <ElFormItem v-if="form.menuType !== '1'" label="路由地址" prop="path">
        <ElInput v-model="form.path" placeholder="请输入路由地址" />
      </ElFormItem>
      <ElFormItem label="权限标识" prop="permission">
        <ElInput v-model="form.permission" placeholder="请权限标识" maxlength="50" />
      </ElFormItem>
      <ElRow>
        <ElCol :span="12">
          <ElFormItem label="排序" prop="sortOrder">
            <ElInputNumber v-model="form.sortOrder" controls-position="right" :min="0" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem v-if="form.menuType !== '1'" label="路由缓冲" prop="keepAlive">
            <ElRadioGroup v-model="form.keepAlive">
              <ElRadioButton label="0">否</ElRadioButton>
              <ElRadioButton label="1">是</ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
    <template #footer>
      <div class="dialog-footer">
        <ElButton type="primary" @click="dataFormSubmit">确 定</ElButton>
        <ElButton @click="visible = false">取 消</ElButton>
      </div>
    </template>
  </ElementDialog>
</template>

<script>
  import { addObj, fetchMenuTree, getObj, putObj } from '@/api/admin/menu'
  import iconList from '@/const/iconList'

  export default {
    name: 'MenuForm',
    data() {
      return {
        // 菜单树选项
        menuOptions: [],
        // 是否显示弹出层
        visible: false,
        // 图标
        iconList,
        form: {
          menuId: undefined,
          name: undefined,
          path: undefined,
          icon: undefined,
          permission: undefined,
          menuType: '0',
          keepAlive: '0',
          sortOrder: 999
        },
        // 表单校验
        rules: {
          name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
          sortOrder: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
          path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
          keepAlive: [{ required: true, message: '路由缓冲不能为空', trigger: 'blur' }],
          permission: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
        }
      }
    },
    methods: {
      init(isEdit, id) {
        if (id != null) {
          this.form.parentId = id
        }
        this.visible = true
        this.getTreeselect()
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          if (isEdit) {
            getObj(id).then(response => {
              this.form = response.data.data
            })
          } else {
            this.form.menuId = undefined
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            if (this.form.parentId === undefined) {
              this.form.parentId = -1
            }

            if (this.form.menuId) {
              putObj(this.form).then(data => {
                this.$message.success('修改成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            } else {
              addObj(this.form).then(data => {
                this.$message.success('添加成功')
                this.visible = false
                this.$emit('refreshDataList')
              })
            }
          }
        })
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        fetchMenuTree().then(response => {
          this.menuOptions = []
          const menu = { id: -1, name: '根菜单', children: [] }
          menu.children = response.data.data
          this.menuOptions.push(menu)
        })
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      }
    }
  }
</script>
